<template>
    <div class="container">
        <Header :brand="brand"></Header>
        <main>
            <LunBo :image="image"></LunBo>
            <Jieshao :price="price" :title="title" :desc="desc" :category="category" :brand="brand"></Jieshao>

        </main>
        <Dibu></Dibu>
    </div>
</template>
<script>
import { getxiangqing } from '@/api/index';
import Header from './components/Header.vue';
import LunBo from './components/LunBo.vue';
import Jieshao from './components/Jieshao.vue';
import Dibu from './components/Dibu.vue';
export default {
    data() {
        return {
            image: [],
            detailObj: {},
            desc: '',
            title: '',
            category: '',
            brand: '',
            price: 0,
        }
    },
    methods: {
        handleImgError(e) {
            console.log("Error", e.target)
        },
        
        onClickIcon(){
        },
        onClickButton(){
        }
    },
    components: {
        Header,
        LunBo,
        Jieshao,
        Dibu
    },
    created() {
        getxiangqing(this.$route.params.proid).then(res => {
            this.detailObj = res.data.data
            this.image = res.data.data.banners[0].split(',')
            this.desc = res.data.data.desc
            this.title = res.data.data.proname
            this.category = res.data.data.category
            this.brand = res.data.data.brand
            this.price = res.data.data.originprice
        })
    }
}
</script>
<style lang="less" scoped>
.custom-cell {
    --van-cell-font-size: 13px;
    /* 这里改成你想要的字体大小 */
}
.van-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
}
.custom-cell .van-cell__title,
.custom-cell .van-cell__value {
    display: flex;
    /* 让内容成为 flex 容器 */
    align-items: center;
    /* 垂直方向居中 */
}
.custom-cell .van-cell__value {
    justify-content: flex-end;
    /* 右对齐 */
    text-align: right;
    white-space: normal;
    /* 多行时可换行 */
    color: #666;
}
.container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    img {
        width: 100%;
        max-width: 375px;
        height: auto;
        display: block;
    }
    .van-swipe-item {
        font-size: 0;
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }
    .van-card {
        margin-top: 0;
    }
    .van-cell {
        display: block;
    }
}
</style>